<template>
    <div class="main">
        <van-tabs v-model="active" :offset-top="45" @change="onChange" swipeable sticky>
            <van-tab v-for="type in types" :title="type.title">
                <van-list v-model="loading"
                          :finished="finished"
                          :error.sync="error"
                          finished-text="我是有底线的!"
                          error-text="请求失败，点击重新加载"
                          @load="onLoad">
                    <tk-goods v-for="item in list" :key="item.id" :data="item"></tk-goods>
                </van-list>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import {Tab, Tabs, List} from 'vant';
    import Goods from '../components/Goods.vue';

    export default {
        data() {
            return {
                active: 0,
                types: [
                    {
                        url: this.$store.api.list + '/3756',
                        title: "综合"
                    },
                    {
                        url: this.$store.api.list + '/3767',
                        title: "女装"
                    },
                    {
                        url: this.$store.api.list + '/3763',
                        title: "美妆个护"
                    },
                    {
                        url: this.$store.api.list + '/3764',
                        title: "男装"
                    },
                    {
                        url: this.$store.api.list + '/3765',
                        title: "内衣"
                    },
                    {
                        url: this.$store.api.list + '/3760',
                        title: "母婴"
                    },
                    {
                        url: this.$store.api.list + '/3761',
                        title: "食品"
                    },
                    {
                        url: this.$store.api.list + '/3759',
                        title: "数码家电"
                    },
                    {
                        url: this.$store.api.list + '/3762',
                        title: "鞋包配饰"
                    },
                    {
                        url: this.$store.api.list + '/3758',
                        title: "家居家装"
                    },
                    {
                        url: this.$store.api.list + '/3766',
                        title: "运动户外"
                    }
                ],
                page: 1,
                rows: 20,
                list: [],
                finished: false,
                loading: false,
                error: false
            }
        },
        components: {
            [Tab.name]: Tab,
            [Tabs.name]: Tabs,
            [List.name]: List,
            [Goods.name]: Goods,

        },
        methods: {
            onChange() {
                this.list = [];
                this.request(this.types[this.active].url, {
                    page: 1,
                    rows: this.rows
                });
            },
            onLoad() {
                this.request(this.types[this.active].url, {
                    page: ++this.page,
                    rows: this.rows
                });
            },
            async request(url, params) {
                this.loading = true;
                try {
                    const result = await this.$http.getStore(url, params);
                    this.list.push(...result['data']);
                } catch (e) {
                    this.error = true;
                }
                this.loading = false;
            }
        },
        watch: {
            page() {
                if (this.page > 20) this.finished = true;
            }
        }
    }
</script>
<style scoped>
    .van-list {
        margin: 10px;
    }

</style>
